<template>
  <div class="root">
    <div class="towBox">
      <!-- <div class="titleBox">修改登录密码</div> -->
      <div class="formBoxB">
        <el-form ref="formB" :rules="newrules" :model="form" label-width="auto">
          <el-form-item label="原密码：" prop="password">
            <el-input
              :type="flagType"
              v-model="form.password"
              placeholder="请输入"
            >
              <i
                slot="suffix"
                :class="[
                  this.flag
                    ? 'iconfont icon-yanjing-zhengyan'
                    : 'iconfont icon-biyan',
                ]"
                style="margin-top: 8px; font-size: 18px"
                @click="getFlag()"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword">
            <el-input
              :type="flagType1"
              v-model="form.newPassword"
              placeholder="请输入"
            >
              <i
                slot="suffix"
                :class="[
                  this.flag1
                    ? 'iconfont icon-yanjing-zhengyan'
                    : 'iconfont icon-biyan',
                ]"
                style="margin-top: 8px; font-size: 18px"
                @click="getFlag1()"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confirmpassword">
            <el-input
              :type="flagType2"
              v-model="form.confirmpassword"
              placeholder="请输入"
            >
              <i
                slot="suffix"
                :class="[
                  this.flag2
                    ? 'iconfont icon-yanjing-zhengyan'
                    : 'iconfont icon-biyan',
                ]"
                style="margin-top: 8px; font-size: 18px"
                @click="getFlag2()"
              ></i>
            </el-input>
          </el-form-item>

          <el-form-item label="">
            <div class="redBtn" @click="updatePassword">确认修改</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
    
    <script>
import md5 from "js-md5";

import { getUserData, updatePassword } from "@/api/user";
import { getToken, removeToken } from "@/utils/auth";
export default {
  data() {
    const mmreg = /(?=.*?[A-Z].*?)(?=.*?[a-z].*?)(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{12,12}/;
    const validatemm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (!mmreg.test(value)) {
          callback(new Error("请输入12位，需包含大小写字母、数字以及字符"));
        }
        callback();
      }
    };
    const changePassWord = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.newPassword !== this.form.confirmpassword) {
          callback(new Error("两次密码不一致"));
        } else if (!mmreg.test(value)) {
          callback(new Error("请输入12位，需包含大小写字母、数字以及字符"));
        }
        callback();
      }
    };
    return {
      flag: false,
      flagType: "password",
      flag1: false,
      flagType1: "password",
      flag2: false,
      flagType2: "password",
      address: "",
      form: {},
      userData: {},
      newrules: {
        password: [{ required: true, validator: validatemm, trigger: "blur" }],
        newPassword: [
          { required: true, validator: validatemm, trigger: "blur" },
        ],
        confirmpassword: [
          { required: true, validator: changePassWord, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getUserData();
  },
  methods: {
    // 小眼睛切换状态
    getFlag() {
      this.flag = !this.flag;
      this.flagType = this.flag ? "text" : "password"; // text为显示密码；password为隐藏密码
    },
    getFlag1() {
      this.flag1 = !this.flag1;
      this.flagType1 = this.flag1 ? "text" : "password"; // text为显示密码；password为隐藏密码
    },
    getFlag2() {
      this.flag2 = !this.flag2;
      this.flagType2 = this.flag2 ? "text" : "password"; // text为显示密码；password为隐藏密码
    },
    //修改密码
    updatePassword() {
      this.$refs["formB"].validate((valid) => {
        if (valid) {
          let params = {
            telephone: this.userData.phone,
            password: this.form.password,
            newPassword: this.form.newPassword,
          };
          params.password = md5(params.password);
          params.newPassword = md5(params.newPassword);
          updatePassword(params).then((data) => {
            if (data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              removeToken();
              this.$router.push("/login");
            }
          });
        } else {
          return false;
        }
      });
    },
    // 获取个人信息
    getUserData() {
      getUserData().then((data) => {
        this.userData = data.data;
      });
    },
  },
};
</script>
    
    <style scoped lang="scss">
.root {
  font-size: 12px;
  /deep/ .el-tabs__content {
    display: none;
  }
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  .btnBoxs {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .resetBtn {
      width: 5vw;
      border-radius: 2px;
      text-align: center;
      color: #666;
      font-size: 0.7vw;
      background-color: #f5f7f9;
    }
    .queryBtn {
      border-radius: 2px;
      text-align: center;
      width: 5vw;
      color: #fff;
      font-size: 0.7vw;
      background: #e22a1f;
      margin-left: 20px;
    }
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  /deep/ .el-input__suffix {
    right: -60px;
  }
  .formBox {
    .headerBox {
      display: flex;
      align-items: center;
      .leftBox {
        display: flex;
        align-items: center;
        font-size: 0.18rem;
        font-weight: 700;
        .ziImg {
          width: 0.2rem;
          height: 0.2rem;
          margin-right: 0.1rem;
        }
      }
      .rightBox {
        cursor: pointer;
        margin-left: 0.4rem;
        color: #666666;
        font-size: 0.12rem;
      }
    }
    .contengBox {
      padding: 0.2rem;
      background: #f5f7f9;
      border-radius: 10px;
      margin-top: 0.2rem;
      .phoneBox {
        display: flex;
        align-items: center;
        font-size: 0.18rem;
        font-weight: 700;
        .touxiangImg {
          width: 0.3rem;
          height: 0.3rem;
          margin-right: 0.1rem;
          border-radius: 50%;
        }
      }
      .dataBox {
        display: flex;
        justify-content: space-between;
        margin-top: 0.18rem;
        .data {
          width: 20%;
          display: flex;
          .newData {
            margin-right: 0.2rem;
          }
        }
      }
    }
    .marTop {
      margin-top: 0.2rem;
    }
    .newContent {
      padding: 0.2rem;
      background: #f4f9ff;
      margin-top: 0.2rem;
      border-radius: 10px;
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .titleBox {
        font-size: 0.18rem;
        font-weight: 700;
      }
      .textBox {
        font-size: 0.1rem;
        margin-top: 0.1rem;
      }
      .btnBox {
        border-radius: 20px;
        border: 1px solid #e8e8e8;
        background: #fff;
        width: 0.7rem;
        height: 0.2rem;
        text-align: center;
        line-height: 0.2rem;
        margin-top: 0.1rem;
        cursor: pointer;
      }
    }
  }
  .titleBox {
    font-size: 0.18rem;
    font-weight: 700;
  }
  .formBoxB {
    margin-top: 0.2rem;
    /deep/ .el-form-item {
      display: flex;
      margin-bottom: 0.2rem;
    }
    /deep/.el-input__suffix {
      right: 5px;
    }
    /deep/ .el-input__inner {
      background-color: #f5f7f9;
      border: 1px solid #e8e8e8;
    }
    /deep/ .el-input {
      width: 3rem;
    }
    .uploadImg {
      width: 0.4rem;
      height: 0.4rem;
      margin: 0.2rem 0;
      margin-top: 0.3rem;
    }
    .cententBox {
      color: #999999;
    }
    /deep/ .el-upload--picture-card {
      line-height: 0;
    }
    .redBtn {
      width: 0.9rem;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #e22a1f;
      color: #fff;
      border-radius: 20px;
      text-align: center;
      margin-left: 0.8rem;
      margin-top: 0.2rem;
      cursor: pointer;
    }
  }
}
</style>
  <style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    // display: flex;
    // align-items: center;
    .form {
      .btnBoxB {
        border: 0.01rem solid #e22a1f;
        font-size: 0.16rem;
        color: #e22a1f;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-left: 0.1rem;
        cursor: pointer;
      }
      /deep/.el-input__suffix {
        right: 5px;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
      }
      /deep/ .el-cascader {
        width: 100%;
      }
      .bitS {
        display: flex;
      }
      .leftBtn {
        width: 1rem;
        color: #fff;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #e22a1f;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        text-align: center;
        margin-left: 0.2rem;
        cursor: pointer;
      }
      .rightBtn {
        background: #fff;
        color: #e22a1f;
        border: 0.01rem solid #e22a1f;
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
  <style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .btnBox {
    width: 1.2rem !important;
  }
}
</style>
    